<template>
<div>
<Modal v-model="modalEdit" fullscreen @on-cancel="handleModalEditCancel" 
@on-ok="handleModalEditOK" ok-text="提交">
	<template #header>
		<Icon custom="iconfont icon-Word"/>&nbsp;现场勘验图&nbsp;
		{{baseform.party_name}}&nbsp;涉嫌&nbsp;{{baseform.cause_name}}
	</template>
	<div><Row justify="center"><Col span="16"><Form ref="baseform" :model="baseform" :label-width="160">
		<Card title="现场勘验图" icon="ios-bookmark">
			<template #extra>
				提交日期：<DatePicker v-model="baseform.date1" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
			</template>
			<FormItem label="绘制内容" prop="content">
				<Input v-model="baseform.content" type="text"/>
			</FormItem>
			<FormItem label="绘制图" prop="photo">
				<Upload ref="upload1" :show-upload-list="false" :on-success="handleUpload1Success"
				:format="['jpg','jpeg','png']" :max-size="20480" type="drag" :data="{index:0}" 
				name="file" style="display: inline-block;width:180px;"  
				:action="uploadActionPhoto">
				    <div style="width: 180px;height:120px;line-height: 120px;">
				        <Icon type="ios-camera" size="48" v-if="photoUrl==''"></Icon>
				        <img :src="photoUrl" height="120" v-else>
				    </div>
				</Upload>
			</FormItem>
		</Card>
	</Form></Col></Row></div>
</Modal>
</div>
</template>

<script>
import {dateUtils,appendDoc} from '@/libs/tools.js'
import config from '@/config'
export default{
	data(){
		return {
			modalEdit:true,
			baseform:{}		
		}
	},
	computed:{
		uploadActionPhoto(){
			return config.baseUrl+'tangyin/main/mainCase1UploadPhoto.action'
		},
		photoUrl(){
			if(this.baseform.photo==null){
				return ''
			}else{
				return config.baseUrl+this.baseform.photo
			}
			
		}
	},
	methods:{
		handleModalEditCancel(){
			this.$router.go(-1)
		},
		handleUpload1Success(res, file, fileList){
			this.baseform.photo=res.photo
		},
		handleModalEditOK(){
			let data={...this.baseform}
			data.date1=dateUtils.format2(data.date1)
			data.docs=appendDoc(data.docs,"doc105")
			this.$axios.post('mainCase1CreateDoc105.action',data).then(res=>{
				window.open(config.baseUrl+res.data,'_blank')
			})
			this.$router.go(-1)
		}
	},
	mounted(){
		this.$axios.post('mainCase1GetDoc105.action',{
			case_no:this.$route.query.case_no,
			party_type:this.$route.query.party_type
		}).then(res=>{
			this.baseform={...this.baseform,...res.data}
			dateUtils.dateNotNull(this.baseform,"date1")
		})
	}
}
</script>

<style>
</style>